<template>
	<view :style="[AppSkinVar]">
		<e-loading-page :loading="showLoading"   >
			<template #icon>
				<loader ></loader>
			</template>
		</e-loading-page>
		<e-tabs :list="tabList" @click="handleChange" :scrollable="false" :lineColor="AppSkin.primary"></e-tabs>
		<scroll-view class="coupon-scroll-view" scroll-y lower-threshold="60">
			<view class="e-p-l-20 e-p-r-20" v-for="list in couponList" :key="list.id">
				<view class="e-flex e-p-t-28 e-p-b-26" v-if="list.type === 1">
					<view class="coupon-platform e-flex e-flex-xy-center"
						:style="{background: AppSkin.gradientPrimary}">
						<image class="img-36" :src="$staticPath('coupon-white.png')" mode="aspectFill"></image>
					</view>
					<view class="fw-600 c-333 e-font-26 e-m-l-22">
						{{$t('user.平台优惠券')}}
					</view>
				</view>
				<view class="e-flex e-p-t-28 e-p-b-26" v-else>
					<view class="coupon-platform e-flex e-flex-xy-center">
						<image style="border-radius: 50%;overflow: hidden;" class="img-36" :src="$fullLink(list.logo)"
							mode="aspectFill"></image>
					</view>
					<view class="fw-600 c-333 e-font-26 e-m-l-22">
						{{list.name}}
					</view>
				</view>

				<view class="e-p-l-20 e-p-r-20 e-p-t-32 e-p-b-30 e-flex e-m-b-20 coupon-item-bg"
					v-for="item in list.coupons" :key="item.id"
					:style="{backgroundImage: item.useStatus === 1 ? `url(${$staticPath('coupon-item-bg-used.png')})` : item.useStatus === 2 ? `url(${$staticPath('coupon-item-bg-expried.png')})` : `url(${$staticPath('coupon-item-bg.png')})`}">
					<view class="e-flex-1 e-p-10">
						<view v-if="item.couponType === 1" class="e-flex fw-600 e-m-b-4 e-flex-xy-center"
							:style="{color: AppSkin.primary}" style="align-items: flex-end;">
							<text class="e-font-32 e-p-b-8">{{$unitEn}}</text>
							<text class="e-font-56">{{item.money}}</text>
						</view>
						<view v-else-if="item.couponType === 2" class="e-flex fw-600 e-m-b-4 e-flex-xy-center"
							:style="{color: AppSkin.primary}" style="align-items: flex-end;">
							<text class="e-font-56">{{item.discountScale}}</text>
							<text class="e-font-32 e-p-b-8">{{$t('public.折')}}</text>
						</view>
						<view v-else class="e-flex fw-600 e-m-b-4 e-flex-xy-center"
							:style="{color: AppSkin.primary}" style="align-items: flex-end;">
							<text class="e-font-56">{{item.discountScale}}</text>
							<text class="e-font-32 e-p-b-8">%</text>
						</view>
						<view class="e-font-20 text-center" :style="{color: AppSkin.primary}">
							<text v-if="item.minPoint">
								<text v-if="$isEnglishVersion">{{$t('public.满')}} {{item.minPoint}}</text>
								<text v-else>{{$t('public.满')}} {{item.minPoint}} {{$t('nearby.可用')}}</text>
							</text>
							<text v-else>
								{{$t('public.无门槛')}}
							</text>
						</view>
					</view>
					<view class="e-flex-2 e-p-10">
						<view class="c-333 fw-600 e-font-26 e-m-b-10">
							{{item.couponName}}
						</view>
						<view
							class="e-m-b-12 e-font-24 e-font-16 e-p-t-6 e-p-r-8 e-p-b-4 e-p-l-8 use-box"
							:style="{color: AppSkin.primary,border: `1rpx solid ${AppSkin.primary}`}">
							<text v-if="item.useType">{{$t('classify.部分商品可用')}}</text>
							<text v-else>{{$t('classify.全部商品可用')}}</text>
						</view>
						<view class="e-font-22 e-m-b-10" v-if="item.couponType === 2 && item.discountMoney">
							{{$t('public.最高优惠')}}：{{$unitEn}}{{item.discountMoney}}
						</view>
						<view class="c-98 e-font-20">
							{{startTime(item.startTime)}}-{{startTime(item.endTime)}}
						</view>
					</view>
					<view class="e-flex-1">
						<view class="use-btn c-white e-font-24	e-flex e-flex-xy-center" @tap="backHome"
							v-if="!item.useStatus" :style="{background: AppSkin.gradientPrimary}">
							{{$t('user.去使用')}}
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<!-- 		<view class="bottom-box bg-white e-font-32 c-333 text-center">
			<view class="e-p-t-50 e-rela">
				{{$t('user.领券中心')}}
					<view class="e-abso bottom-box-count e-font-20 c-white" :style="{background: AppSkin.gradientPrimary}">
					<view class="count-text">
						4{{$t('user.张待领取')}}
					</view>
					<view class="e-abso count-triangle" :style="{'border-top-color': AppSkin.primary}"></view>
				</view>
			</view>
		</view> -->
	</view>
</template>

<script lang="ts" setup>
	import { ref } from 'vue'
	import {
		onShow
	} from '@dcloudio/uni-app'
	import {
		useI18n,
		useCurrentInstance
	} from '@/common/hooks'
	import {
		getCouponList
	} from '@/common/request/api'
	import { useInit } from '@/common/stores';

	const ctx = useCurrentInstance()
	const {setTabbarPageIndex} = useInit()
	const commonI18 = useI18n('common')

	const tabList = ref([{
		name: commonI18('全部'),
	},
	{
		name: commonI18('待使用'),
	},
	{
		name: commonI18('已过期'),
	}
	])
	const couponList = ref([])
	const useStatus = ref()
	const showLoading = ref(false)

	const startTime = (val:string) => {
		return val.split(' ')[0]
	}


	const backHome = () => {
		setTabbarPageIndex(0);
		ctx.$switchTab('/pages/tabbar/index');
	}
	const getData = () => {
		showLoading.value = true
		getCouponList({
			useStatus: useStatus.value
		}).then((res:any) => {
			couponList.value = res.data
		}).finally(() => showLoading.value = false)
	}
	const handleChange = (val:any) => {
		if (val.index === useStatus.value) return
		if (val.index === 1) {
			useStatus.value = 0
		} else if (val.index === 2) {
			useStatus.value = 2
		} else {
			useStatus.value = ''
		}
		couponList.value = []
		getData()
	}

	onShow(() => {
		getData()
	})
</script>

<style lang="scss" scoped>
	.left-box {
		flex: 0 0 160rpx;
	}

	.use-btn {
		bottom: 22rpx;
		right: 40rpx;
		border-radius: 25rpx;
		width: 144rpx;
		height: 50rpx;
		background: linear-gradient(180deg, #F5DEBA 0%, #FDEAC1 100%);
	}


	// 新版样式
	.coupon-scroll-view {
		height: calc(100vh - 44px - 150rpx);
		background: #F7F7F7;

		.coupon-platform {
			padding: 2rpx;
			border-radius: 50%;
		}

		.use-box {
			border-radius: 4rpx;
			display: inline-block;
		}

		.c-98 {
			color: #989898;
		}
	}

	.bottom-box {
		width: 100vw;
		height: 150rpx;
		position: fixed;
		bottom: 0;

		.bottom-box-count {
			border-radius: 25rpx;
			padding: 6rpx 12rpx;
			top: 16rpx;
			left: 58%;

			.count-text {
				position: relative;
				z-index: 9;
			}

			.count-triangle {
				bottom: -20rpx;
				width: 0px;
				height: 0px;
				border-left: 16rpx solid transparent;
				border-top: 30rpx solid;
				border-right: 16rpx solid transparent;
				transform: rotate(30deg);
				z-index: 0;

			}
		}
	}

	.coupon-item-bg {
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}
</style>